<template>
    <a-configprovider :locale="zh_CN">
        <a-layout style="width: 100%;height: 98vh">
            <a-layout-header class="header">
                <div class="logo"/>
                <a-menu v-model:selectedKeys="selectedKeys1" theme="dark" mode="horizontal" style="line-height: 64px"/>
            </a-layout-header>
            <a-layout>
                <a-layout-sider width="200" style="background: #fff">
                    <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
                            :style="{ height: '100%', borderRight: 0 }">
                        <a-sub-menu key="sub1">
                            <template #title>
              <span>
                <account-book-outlined/>
                订单管理
              </span>
                            </template>
                            <a-menu-item key="1">订单列表</a-menu-item>
                            <a-menu-item key="2">退款订单列表</a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="sub2">
                            <template #title>
              <span>
                <laptop-outlined/>
                商品管理
              </span>
                            </template>
                            <a-menu-item key="5">商品列表</a-menu-item>
                            <a-menu-item key="6">商品类目管理</a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="sub3">
                            <template #title>
              <span>
                <user-outlined/>
                会员管理
              </span>
                            </template>
                            <a-menu-item key="9">会员列表</a-menu-item>
                        </a-sub-menu>
                    </a-menu>
                </a-layout-sider>
                <a-layout style="padding: 0 24px 24px">
                    <a-breadcrumb style="margin: 16px 0">
                        <a-breadcrumb-item>Home</a-breadcrumb-item>
                        <a-breadcrumb-item>List</a-breadcrumb-item>
                        <a-breadcrumb-item>App</a-breadcrumb-item>
                    </a-breadcrumb>
                    <a-layout-content
                            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
                    >
                        <router-view/>
                    </a-layout-content>
                </a-layout>
            </a-layout>
        </a-layout>
    </a-configprovider>
</template>

<script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')
    export default {
        name: "MainLayout",
        data() {
            return {
                zh_CN: zhCN
            }
        },
        created() {

        },

        mounted() {

        },

        methods: {}
    }
</script>

<style scoped>
    .logo {
        float: left;
        width: 120px;
        height: 31px;
        margin: 16px 24px 16px 0;
        background: rgba(255, 255, 255, 0.3);
    }

    .logo {
        float: right;
        margin: 16px 0 16px 24px;
    }

    .site-layout-background {
        background: #fff;
    }
</style>